<template>
	<view class="content">
		<view class="userInfo">
			<image src="https://gw.alicdn.com/tps/TB1W_X6OXXXXXcZXVXXXXXXXXXX-400-400.png"></image>
			<view class="name">
				youjie
			</view>
			<view class="phone">
				18674497603
			</view>
			<view class="phone">
				youjie2015@126.com
			</view>
		</view>
		<view class="order">
			<view class="title">
				<navigator url="/pages/order/index" hover-class="navigator-hover">
					<view class="uni-icon">
						&#xe608;
					</view>
					我的票卷
					<view class="uni-icon fr">
						&#xe832;
					</view>
				</navigator>

			</view>
			<view class="op">
				<view class="item">
					<view class="uni-icon">&#xe87d;</view>
					<view>待参加</view>
				</view>
				<view class="item">
					<view class="uni-icon">&#xe87c;</view>
					<view>已参加</view>
				</view>
				<view class="item">
					<view class="uni-icon">&#xe616;</view>
					<view>待付款</view>
				</view>
				<view class="item">
					<view class="uni-icon">&#xe661;</view>
					<view>已过期</view>
				</view>
			</view>
		</view>

		<view class="ul">
			<view class="title">
				<view class="uni-icon">
					&#xe666;
				</view>
				申请志愿者
				<view class="uni-icon fr">
					&#xe832;
				</view>
			</view>
			<view class="title" @tap="login">
				<view class="uni-icon">
					&#xe617;
				</view>
				意见反馈
				<view class="uni-icon fr">
					&#xe832;
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'User',
		data: function () {
			return {

			};
		},
		methods: {
			login() {
				uni.getProvider({
				service: 'oauth',
				success: function (res) {
					console.log(res.provider)
					if (~res.provider.indexOf('qq')) {
						uni.login({
							provider: 'qq',
							success: function (loginRes) {
								console.log(JSON.stringify(loginRes));
							}
						});
					}
				}
			});
			}
		}
	}
</script>

<style scoped>
	.userInfo {
		padding: 40px 20px;
		text-align: center;
		background: #0099CC;
		color: #fff;
	}

	.userInfo image {
		width: 150px;
		height: 150px;
		border-radius: 50%;
		border: 1px solid #EEEEEE;
		padding: 20px;
		background: #fff;
	}

	.userInfo>view {
		margin: 10px 0;
		font-size: 35px;
	}

	.order {
		padding: 20px;
		background: #fff;
	}

	.title {
		background: #fff;
		height: 60px;
		font-size: 30px;
		line-height: 60px;
		border-bottom: 1px solid #eee;
	}

	.uni-icon {
		height: 60px;
		font-size: 30px;
		line-height: 60px;
	}

	.order .op {
		display: flex;
		margin-top: 15px;
	}

	.order .op .item {
		flex: 1;
		text-align: center;
	}

	.order .op .item .uni-icon {
		font-size: 45px;
	}

	.order .op .item>view {
		margin: 10px 0;
	}

	.ul {
		margin-top: 40px;
	}

	.ul .title {
		margin-bottom: 20px;
		padding: 15px 20px;
	}
</style>
